<template>
    <div class="model_search-wrapper">
        <modal_com v-if="show" :modalShow="modalShow" type="mysearch" :actions="actions" @toHidden='toHidden' @onVisible='onVisible'
                   @yes_event='yes_event'>
            <div slot='header'>
                搜索{{model_name}}
            </div>
            <!--v-if="searchField.length>0"-->
            <!--<div slot='content' v-if="isList" class="ui segment">-->
            <div slot='content' class="ui segment">

                <div class="ui two column grid ">

                    <div class="column">
                        <div class="ui two column grid  menu">
                            <div class="four wide column header item">
                                ID
                            </div>
                            <div class="ui twelve wide column  input item">
                                <input type="text" @keyup.enter="searchItem_toSearch" v-model.trim="vo.id" name="id"
                                       placeholder="请输入ID">
                            </div>
                        </div>
                    </div>

                    <template v-if="confSearch.length>0" v-for="field in confSearch">
                        <searchItem :field="field" @setVal='setVal' :fval="vo[field.field]"
                                    type="confSearch"></searchItem>
                    </template>
                    <template v-if="searchField.length>0" v-for="field in searchField">
                        <searchItem :field="field" @setVal='setVal' :fval="vo[field.name]"
                                    type="searchField"></searchItem>
                    </template>
                    <span style="display: none;">{{show_date_search=enumField_date_type.enum_val&&enumField_date_type.fval!==undefined}}</span>
                    <div class="sixteen wide column " v-if="this.use_time_search&&show_date_search">
                        <div class="ui two column grid  menu">
                            <div class="six wide column header item">
                                <myenum :param="{}" v-if="show_date_search"
                                        :field="enumField_date_type" @setVo='setVal'></myenum>
                            </div>
                            <div class="ui ten wide column  input item">
                                <date_range :field="date_field" :not_setVal="true" ref="date_range" @setVo="setDate"></date_range>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="ui one column grid " v-if="confSearch_group.length>0">
                    <searchItem v-for="field in confSearch_group" :field="field" @setVal='setVal' :fval="vo.con"
                                type="confSearch"></searchItem>
                </div>
                <div class="ui one column grid " v-if="confSearch_city.length>0">
                    <searchItem v-for="field in confSearch_city" :field="field" @setVal='setVal' :fval="vo[field.field]"
                                type="confSearch"></searchItem>
                </div>
            </div>
            <!--<div slot='content' class="ui message warning" v-else>该页面暂未配置搜索，若需要搜索功能，欢迎反馈</div>-->

        </modal_com>

    </div>

</template>

<script type="text/ecmascript-6">
    import modal_com from 'components/modal/modal_com'
    import searchItem from 'components/search/searchItem'
    import date_range from 'components/field/date_range';
    import myenum from 'components/field/enum';

    import tool from 'src/util/tool';
    import util from '_util/index';
    import _ from 'lodash'
    import logic from '_logic';

    import {
        mapState,
        mapMutations,
    } from 'vuex'

    export default {
        data() {
            return {
                searchField: [],
                confSearch: [],
                confSearch_group: [],
                confSearch_city: [],
                modelConf: {},
                use_time_search: false,
                actions: {
                    positive: '提交',
                    negative: '取消'
                },
                vo: {},
                enumField_date_type: {
                    name: 'date_type',
                    enum_type: 0,
                    enum_val: null,
                    fval:'create'
                },
                model_name: '',
                model_id: '',
                fromBind_name: '',
                fromBind: false,
                show: true,
                date_type: null,
                idvalue: ''
            }
        },
        components: {
            modal_com, searchItem, date_range,myenum
        },
        methods: {
            setDate(fname, val) {
                Object.assign(this.vo, val);
            },
            setVal(fname, val) {
                this.vo[fname] = val;
            },
            onVisible() {
                this.recoverItemVal();
//                let date_range = this.$refs['date_range'];
//                if (date_range)
//                    date_range.upVal(this.date_field.fval);
            },
            toHidden() {
                this.$emit('modalComHidden')
                logic.search.sync_fval_tmp(this);
            },
            getSearchFields(_mid = null,fromBind_name = null) {
                if (_mid) {
                    this.fromBind = true;
                    this.fromBind_name = fromBind_name;
                } else
                    this.fromBind = false;
                this.vo = {}
                this.confSearch = []
                this.searchField = []
                this.confSearch_group = []
                this.confSearch_city = []
                this.$set(this.enumField_date_type, 'enum_val', null);

                let url = tool.getApi(this, 'Search', 'getSearchFields');

                util.store.commit(this,'getModel');
                let mid = this.model_id = _mid || util.store.get(this,'vuexRs');
                let _model = util.store.getModelByMid(this, mid);
                this.model_name = _model && _model.title || '';
                if (mid) {
                    util.store.commit(this,'set_modal_search_mid', mid);
                    let param = {
                        mid: mid,

                    }
                    util.getDataCom(this, url, param, (data) => {

                        let enum_val = [
                            {
                                id: 'create',
                                title: '创建日期'
                            }
                        ];
                        if(!this.vo.date_type)
                            this.$set(this.vo, 'date_type', "create");
                        if (data.date_type && data.date_type.length > 0) {
//                            tool.cl('data.date_type:', data.date_type);
//                            tool.cl('enum_val:', enum_val);
                            let not_need_create = logic.search.not_need_create(this);
                            enum_val=not_need_create?data.date_type:_.concat(enum_val,data.date_type);
                        }
                        this.$set(this.enumField_date_type, 'enum_val', enum_val);
                        this.$set(this.enumField_date_type, 'fval', enum_val[0].id);

                        if (data.confSearch && data.confSearch.length > 0) {
                            this.confSearch = data.confSearch.filter(item => !['group','city'].contains(item.flag));
                            this.confSearch_group = data.confSearch.filter(item => item.flag == 'group');
                            this.confSearch_city = data.confSearch.filter(item => item.flag == 'city');
                        } else {
                            this.confSearch = []
                            this.confSearch_group = []
                            this.confSearch_city = []
                        }
                        if (data.searchField && data.searchField.length > 0) {
                            let _fields = data.fields;
                            _fields = util.id2Key(_fields);

                            let tmp = data.searchField.filter(item => item > 0)
                            if (tmp.length > 0) {
                                this.searchField = tmp.map(id => {
                                    return _fields[id];
                                })
                            }
                            else
                                this.searchField = []
                        } else {
                            this.searchField = []
                        }

                    });
                }
            },
            yes_event() {
                if(!this.ckDate()) {
                    util.store.push(this, 'set_yes_event_hide', 'yes_event_hide', false, false, 'com');
                    return;
                }
                logic.search.set_fval(this);
                if (this.fromBind)
                    util.eventEmit(this, 'bind_search_modal', {vo: this.vo, mid: this.model_id, field_name: this.fromBind_name});
                else{
                    this.$emit('doSearch', this.vo)
                }

            },
            ckDate() {
                if(this.vo.startTime&&!this.vo.endTime){
                    util.showMypop(this, 'warning', '请选择结束时间');
                    return false;
                }else if(!this.vo.startTime&&this.vo.endTime){
                    util.showMypop(this, 'warning', '请选择开始时间');
                    return false;
                }
                return true;
            },
            searchItem_toSearch() {
                this.$emit('modalComHidden');
                this.yes_event();
            },
            clearModalSearchField(flag=0) {
                this.$set(this.enumField_date_type, 'enum_val', null);
                this.$set(this.enumField_date_type, 'fval', 'create');
//                this.show=false;
                if(flag)
                    this.vo = {};
                else
                    util.mydelay(() => {
                        this.vo = {};
                    },100);
            },
            set_use_time_search() {
                this.use_time_search = false;
                if (this.modelConf.btns) {
                    let btns = JSON.parse(this.modelConf.btns);
                    if (btns) {
                        let ind = _.findIndex(btns, (btn) => {
                            return btn.code == 'timeSearch';
                        })
                        if (ind !== -1)
                            this.use_time_search = true;
                    }
                }

            },
            recoverItemVal() {

                if(!this.is_list||this.fromBind)
                    return;

                let ctl = this.ctl;
                let save_item = ['id', 'endTime', 'startTime', 'date_type'];

                let info = this.$store.state.list.filterData[ctl];

                let enum_val = this.enumField_date_type.enum_val;
                let date_type_fval = enum_val?enum_val[0].id:'create';

                info && save_item.forEach(item => {
                    let val = info[item];
//                    tool.cl('item:', item);
//                    tool.cl('val:', val);
                    if ( val) {
                        this.$set(this.vo, item, val);
                        switch (item) {
                            case 'date_type':
                                date_type_fval = val;
                                break;
                        }
                    }


                });
                this.$set(this.enumField_date_type, 'fval', date_type_fval);
            },
            setModelConf() {
                this.getModel(1);
                let model = this.vuexRs
                this.modelConf = model;
            },
            ...mapMutations({
                getModel:'global/getModel'
            }),
        },
        watch: {
            modelConf: function (val) {
                if (val)
                    this.set_use_time_search()
            },
            is_list: function (val, old) {
                if (val != old) {
                    this.clearModalSearchField();
                }
            },
            ctl: function (val, old) {
                if (val != old) {
//                    this.clearModalSearchField(1);
                    this.setModelConf()
                    this.recoverItemVal()
                }
            }
        },
        props: ['modalShow', 'isList'],
        created() {

//    if(this.isList){
            this.getSearchFields()
            this.setModelConf()
//    }

            let eventVue = util.store.get(this,'eventVue');
            eventVue.$on('changeSearch', this.getSearchFields);
            eventVue.$on('searchItem_toSearch', this.searchItem_toSearch);
            eventVue.$on('clearModalSearchField', this.clearModalSearchField);
        },
        computed: {
            date_field() {
                let tmp = {
                    name: 'searchDate',
                    fval: {
                        endTime: this.vo.endTime,
                        startTime: this.vo.startTime
                    }
                };
                return tmp;
            },
            ctl() {
                return this.$route.query.ctl;
            },
            is_list() {
                return util.store.get(this, 'is_list');
            },
            ...mapState({
                vuexRs:state=>state.global.vuexRs
            })
        },
        mounted() {
            //设置id默认值如果有的话


        }
    }
</script>
<style rel="stylesheet/less" lang="less">
    .ui.long.basic.modal.modal_com.mysearch.active {
        overflow: auto;
    }
</style>
